<template>
  <div class="project-container">
    <!-- 顶部操作栏 -->
    <div class="project-header">
      <h1 class="page-title">项目管理</h1>
      <div class="action-buttons">
        <el-button type="primary" @click="createProject">创建项目</el-button>
        <el-button @click="manageCategoriesDialog = true">分类管理</el-button>
        <el-select v-model="viewType" placeholder="视图选择">
          <el-option label="列表视图" value="list"></el-option>
          <el-option label="看板视图" value="kanban"></el-option>
          <el-option label="甘特图" value="gantt"></el-option>
          <el-option label="日历视图" value="calendar"></el-option>
        </el-select>
      </div>
    </div>

    <!-- 项目筛选区 -->
    <div class="search-container">
      <div class="search-wrapper">
        <div class="search-header">
          <div class="search-title">
            <el-icon><Search /></el-icon>
            <span>智能搜索</span>
          </div>
          <div class="search-actions">
            <el-tooltip content="保存当前搜索条件" placement="top">
              <el-button class="action-btn" circle><el-icon><Collection /></el-icon></el-button>
            </el-tooltip>
            <el-tooltip content="重置搜索条件" placement="top">
              <el-button class="action-btn" circle @click="resetSearch"><el-icon><RefreshLeft /></el-icon></el-button>
            </el-tooltip>
          </div>
        </div>
        
        <div class="search-body">
          <div class="search-fields">
            <div class="search-field">
              <el-input 
                v-model="searchObject.docNumber" 
                placeholder="输入单据编号搜索..." 
                class="glass-input">
                <template #prefix>
                  <el-icon><Document /></el-icon>
                </template>
              </el-input>
            </div>
            
            <div class="search-field">
              <el-select 
                v-model="searchObject.approveStatus" 
                placeholder="选择审批状态" 
                class="glass-select">
                <template #prefix>
                  <div class="select-prefix">审批</div>
                </template>
                <el-option label="全部" value="" />
                <el-option label="已审批" value="approved" />
                <el-option label="未审批" value="unapproved" />
                <el-option label="审批中" value="approving" />
              </el-select>
            </div>
            
            <div class="search-field">
              <el-select 
                v-model="searchObject.executeStatus" 
                placeholder="选择执行状态" 
                class="glass-select">
                <template #prefix>
                  <div class="select-prefix">执行</div>
                </template>
                <el-option label="全部" value="" />
                <el-option label="待启动" value="pending" />
                <el-option label="进行中" value="in-progress" />
                <el-option label="已完成" value="completed" />
                <el-option label="已暂停" value="paused" />
              </el-select>
            </div>
            
            <div class="search-field">
              <el-select 
                v-model="searchObject.terminateStatus" 
                placeholder="选择终止状态" 
                class="glass-select">
                <template #prefix>
                  <div class="select-prefix">终止</div>
                </template>
                <el-option label="全部" value="" />
                <el-option label="已终止" value="terminated" />
                <el-option label="未终止" value="not-terminated" />
              </el-select>
            </div>
          </div>
          
          <div class="search-fields">
            <div class="search-field date-field">
              <div class="date-label">
                <el-icon><Calendar /></el-icon>
                <span>日期范围</span>
              </div>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                @change="handleDateRangeChange"
                class="glass-date-picker"
              />
            </div>
            
            <div class="search-field">
              <el-input
                v-model="searchObject.supplier"
                placeholder="输入供应商名称..." 
                class="glass-input">
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </div>
          </div>
        </div>
        
        <div class="search-footer">
          <div class="search-tags" v-if="selectedTags.length > 0">
            <div class="tag-label">已选条件:</div>
            <el-tag 
              v-for="tag in selectedTags" 
              :key="tag" 
              closable 
              class="search-tag"
              @close="removeTag(tag)">
              {{ tag }}
            </el-tag>
          </div>
          
          <div class="search-buttons">
            <el-button class="expand-btn" @click="toggleAdvancedSearch">
              {{ advancedSearch ? '收起' : '高级搜索' }}
              <el-icon class="expand-icon">
                <component :is="advancedSearch ? 'ArrowUp' : 'ArrowDown'" />
              </el-icon>
            </el-button>
            
            <el-button class="search-btn" type="primary" @click="search" :loading="loading">
              <el-icon><Search /></el-icon>
              <span>搜索</span>
            </el-button>
          </div>
        </div>
        
        <!-- 高级搜索区域 -->
        <div v-if="advancedSearch" class="advanced-search">
          <div class="search-fields">
            <div class="search-field">
              <el-select 
                v-model="searchObject.priority" 
                placeholder="优先级" 
                class="glass-select">
                <template #prefix>
                  <el-icon><Warning /></el-icon>
                </template>
                <el-option label="全部" value="" />
                <el-option label="高" value="high" />
                <el-option label="中" value="medium" />
                <el-option label="低" value="low" />
              </el-select>
            </div>
            
            <div class="search-field">
              <el-select 
                v-model="searchObject.status" 
                placeholder="项目状态" 
                class="glass-select">
                <template #prefix>
                  <el-icon><Setting /></el-icon>
                </template>
                <el-option label="全部" value="" />
                <el-option label="待启动" value="pending" />
                <el-option label="进行中" value="in-progress" />
                <el-option label="已完成" value="completed" />
                <el-option label="已暂停" value="paused" />
              </el-select>
            </div>
            
            <div class="search-field">
              <el-input 
                v-model="searchObject.manager" 
                placeholder="项目经理" 
                class="glass-input">
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </div>
            
            <div class="search-field">
              <el-select 
                v-model="searchObject.categoryId" 
                placeholder="项目分类" 
                class="glass-select">
                <template #prefix>
                  <el-icon><Collection /></el-icon>
                </template>
                <el-option label="全部" value="" />
                <el-option
                  v-for="category in categories"
                  :key="category.id"
                  :label="category.name"
                  :value="category.id"
                />
              </el-select>
            </div>
          </div>
          
          <div class="progress-slider">
            <span class="slider-label">进度范围:</span>
            <el-slider
              v-model="progressRange"
              range
              :marks="{0: '0%', 25: '25%', 50: '50%', 75: '75%', 100: '100%'}"
              @change="handleProgressChange"
              class="glass-slider"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 项目列表 -->
    <div v-if="viewType === 'list'" class="project-list">
      <el-table :data="filteredProjects" style="width: 100%">
        <el-table-column prop="name" label="项目名称"></el-table-column>
        <el-table-column prop="category" label="项目分类">
          <template #default="scope">
            <el-tag :type="getCategoryType(scope.row.categoryId)" effect="plain">
              {{ getCategoryName(scope.row.categoryId) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="manager" label="项目经理"></el-table-column>
        <el-table-column prop="startDate" label="开始日期"></el-table-column>
        <el-table-column prop="endDate" label="截止日期"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="进度">
          <template #default="scope">
            <el-progress :percentage="scope.row.progress"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="viewProject(scope.row)">查看</el-button>
            <el-button size="small" type="primary" @click="editProject(scope.row)">编辑</el-button>
            <el-dropdown>
              <el-button size="small">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="archiveProject(scope.row)">归档</el-dropdown-item>
                  <el-dropdown-item @click="deleteProject(scope.row)" divided>删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                       :page-size="pageData.size" :pager-count="5"
                       layout="total, sizes, prev, pager, next, jumper" :page-count="pageData.totalPage"
                       :total="pageData.total" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
    </div>

    <!-- 看板视图 -->
    <div v-else-if="viewType === 'kanban'" class="project-kanban">
      <KanbanBoard
        :projects="filteredProjects"
        @project-click="handleProjectClick"
        @status-change="handleStatusChange"
      />
    </div>

    <!-- 甘特图视图 -->
    <div v-else-if="viewType === 'gantt'" class="project-gantt">
      <GanttChart
        :projects="filteredProjects"
        @project-click="handleProjectClick"
      />
    </div>

    <!-- 日历视图 -->
    <div v-else-if="viewType === 'calendar'" class="project-calendar">
      <CalendarView
        :projects="filteredProjects"
        @project-click="handleProjectClick"
      />
    </div>

    <!-- 项目创建/编辑抽屉 -->
    <el-drawer
      :title="dialogType === 'create' ? '创建项目' : '编辑项目'"
      v-model="dialogVisible"
      direction="rtl"
      size="45%"
    >
      <div class="drawer-content">
        <ProjectForm
          :type="dialogType"
          :initial-data="projectForm"
          :categories="categories"
          @cancel="dialogVisible = false"
          @save="handleSaveProject"
        />
      </div>
    </el-drawer>

    <!-- 分类管理对话框 -->
    <el-dialog
      title="项目分类管理"
      v-model="manageCategoriesDialog"
      width="40%"
    >
      <CategoryManagement
        v-model:categories="categories"
        :projects="projects"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import {computed, reactive, ref, watch} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useRouter} from 'vue-router'
import {
  Search, Document, Setting, Collection, User, 
  ArrowDown, ArrowUp, Warning, Minus, Calendar,
  RefreshLeft, Download, MagicStick, More, QuestionFilled, Close
} from '@element-plus/icons-vue'
import GanttChart from './components/GanttChart.vue'
import KanbanBoard from './components/KanbanBoard.vue'
import CalendarView from './components/CalendarView.vue'
import ProjectForm from './components/ProjectForm.vue'
import CategoryManagement from './components/CategoryManagement.vue'
import {defineStore} from "pinia";
import {usePage} from "@/utils/usePage.js";
import {useView} from "@/utils/useView.js";

const router = useRouter()

// 视图类型
const viewType = ref('list')
// 高级搜索展开状态
const advancedSearch = ref(false)
// 日期范围
const dateRange = ref([])
// 进度范围
const progressRange = ref([0, 100])
// 对话框显示状态
const dialogVisible = ref(false)
// 对话框类型：create-创建，edit-编辑
const dialogType = ref('create')
// 当前编辑的项目ID
const currentProjectId = ref(null)

// 分类管理对话框
const manageCategoriesDialog = ref(false)

// 项目表单
const projectForm = reactive({
  name: '',
  description: '',
  manager: '',
  members: [],
  dateRange: [],
  status: 'pending',
  categoryId: null
})

// 项目分类数据
const categories = ref([
  {
    id: 1,
    name: '研发项目',
    description: '产品研发相关项目',
    type: 'primary'
  },
  {
    id: 2,
    name: '市场项目',
    description: '市场营销相关项目',
    type: 'success'
  },
  {
    id: 3,
    name: '运营项目',
    description: '日常运营相关项目',
    type: 'warning'
  },
  {
    id: 4,
    name: '管理项目',
    description: '内部管理相关项目',
    type: 'info'
  }
])

// 模拟项目数据
const projects = ref([
  {
    id: 1,
    name: '产品重构项目',
    description: '对现有产品进行架构重构，提升性能和用户体验',
    manager: '张三',
    members: ['张三', '李四', '王五'],
    startDate: '2023-01-01',
    endDate: '2023-06-30',
    status: 'in-progress',
    progress: 45,
    categoryId: 1
  },
  {
    id: 2,
    name: '市场推广计划',
    description: '制定并执行2023年Q2市场推广策略',
    manager: '李四',
    members: ['李四', '赵六'],
    startDate: '2023-04-01',
    endDate: '2023-06-30',
    status: 'pending',
    progress: 0,
    categoryId: 2
  },
  {
    id: 3,
    name: '客户满意度调研',
    description: '进行客户满意度问卷调查并分析结果',
    manager: '王五',
    members: ['王五', '张三'],
    startDate: '2023-02-15',
    endDate: '2023-03-15',
    status: 'completed',
    progress: 100,
    categoryId: 3
  }
])

// 根据筛选条件过滤项目
const filteredProjects = computed(() => {
  return projects.value.filter(project => {
    // 关键词筛选
    const keywordMatch = !searchObject.name ||
      project.name.includes(searchObject.name) ||
      project.description.includes(searchObject.name)

    // 状态筛选
    const statusMatch = !searchObject.status || project.status === searchObject.status

    // 分类筛选
    const categoryMatch = !searchObject.categoryId || project.categoryId === searchObject.categoryId

    return keywordMatch && statusMatch && categoryMatch
  })
})

// 获取状态对应的标签类型
const getStatusType = (status) => {
  const statusMap = {
    'pending': 'info',
    'in-progress': 'primary',
    'completed': 'success',
    'paused': 'warning'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'pending': '待启动',
    'in-progress': '进行中',
    'completed': '已完成',
    'paused': '已暂停'
  }
  return statusMap[status] || '未知状态'
}

// 获取分类名称
const getCategoryName = (categoryId) => {
  const category = categories.value.find(c => c.id === categoryId)
  return category ? category.name : '未分类'
}

// 获取分类标签类型
const getCategoryType = (categoryId) => {
  const category = categories.value.find(c => c.id === categoryId)
  return category ? category.type : ''
}

// 创建项目
const createProject = () => {
  dialogType.value = 'create'
  currentProjectId.value = null
  // 重置表单
  Object.assign(projectForm, {
    name: '',
    description: '',
    manager: '',
    members: [],
    dateRange: [],
    status: 'pending',
    categoryId: null
  })
  dialogVisible.value = true
}

// 编辑项目
const editProject = (project) => {
  dialogType.value = 'edit'
  currentProjectId.value = project.id
  // 填充表单
  Object.assign(projectForm, {
    name: project.name,
    description: project.description,
    manager: project.manager,
    members: project.members,
    dateRange: [project.startDate, project.endDate],
    status: project.status,
    categoryId: project.categoryId
  })
  dialogVisible.value = true
}

// 查看项目详情
const viewProject = (project) => {
  // 使用查询参数跳转到项目详情页
  router.push(`/project/detail?id=${project.id}`)
}

// 归档项目
const archiveProject = (project) => {
  ElMessageBox.confirm(`确定要归档项目"${project.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 执行归档操作
    ElMessage.success('项目已归档')
  }).catch(() => {
    // 取消操作
  })
}

// 删除项目
const deleteProject = (project) => {
  ElMessageBox.confirm(`确定要删除项目"${project.name}"吗？此操作不可恢复！`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    // 执行删除操作
    projects.value = projects.value.filter(p => p.id !== project.id)
    ElMessage.success('项目已删除')
  }).catch(() => {
    // 取消操作
  })
}

// 保存项目
const handleSaveProject = (projectData) => {
  // 添加进度字段
  projectData.progress = projectData.status === 'completed' ? 100 : (projectData.status === 'pending' ? 0 : 30)

  if (dialogType.value === 'create') {
    // 创建新项目
    projectData.id = Date.now() // 简单生成ID
    projects.value.push(projectData)
    ElMessage.success('项目创建成功')
  } else {
    // 更新现有项目
    const index = projects.value.findIndex(p => p.id === currentProjectId.value)
    if (index !== -1) {
      projectData.id = currentProjectId.value
      projectData.progress = projects.value[index].progress // 保留原进度
      projects.value[index] = projectData
      ElMessage.success('项目更新成功')
    }
  }

  dialogVisible.value = false
}

// 处理甘特图项目点击
const handleProjectClick = (project) => {
  viewProject(project);
}

// 处理项目状态变更
const handleStatusChange = ({ projectId, oldStatus, newStatus }) => {
  const project = projects.value.find(p => p.id === projectId)
  if (project) {
    project.status = newStatus

    // 根据新状态更新进度
    if (newStatus === 'completed') {
      project.progress = 100
    } else if (newStatus === 'pending') {
      project.progress = 0
    } else if (newStatus === 'in-progress' && oldStatus === 'pending') {
      project.progress = 30
    }
  }
}

const searchStore = defineStore('orderStore', {

  state: () => {
    return {
      searchObject: {
        no: 1,
        size: 10,
        sortField: "id",
        sortMethod: "desc",
        shop: '',
        name: '',
        status: '',
        categoryId: '',
        manager: '',
        startDate: '',
        endDate: '',
        progressMin: 0,
        progressMax: 100,
        priority: '',
        approveStatus: '',
        executeStatus: '',
        terminateStatus: '',
        docNumber: '',
        supplier: ''
      }
    }
  }
})

const {searchObject} = searchStore();

// 处理日期范围变化
const handleDateRangeChange = (val) => {
  if (val && val.length === 2) {
    searchObject.startDate = val[0];
    searchObject.endDate = val[1];
    
    // 添加或更新标签
    const dateTag = `日期: ${val[0]} 至 ${val[1]}`;
    updateTag('日期', dateTag);
  } else {
    searchObject.startDate = '';
    searchObject.endDate = '';
    
    // 移除日期标签
    removeTagByPrefix('日期');
  }
}

// 处理进度范围变化
const handleProgressChange = (val) => {
  searchObject.progressMin = val[0];
  searchObject.progressMax = val[1];
  
  // 添加或更新标签
  const progressTag = `进度: ${val[0]}% 至 ${val[1]}%`;
  updateTag('进度', progressTag);
}

// 添加或更新标签
const updateTag = (prefix, newTag) => {
  const index = selectedTags.value.findIndex(tag => tag.startsWith(prefix));
  if (index !== -1) {
    selectedTags.value[index] = newTag;
  } else {
    selectedTags.value.push(newTag);
  }
}

// 根据前缀移除标签
const removeTagByPrefix = (prefix) => {
  const index = selectedTags.value.findIndex(tag => tag.startsWith(prefix));
  if (index !== -1) {
    selectedTags.value.splice(index, 1);
  }
}

// 重置搜索条件
const resetSearch = () => {
  searchObject.name = '';
  searchObject.status = '';
  searchObject.categoryId = '';
  searchObject.manager = '';
  searchObject.startDate = '';
  searchObject.endDate = '';
  searchObject.progressMin = 0;
  searchObject.progressMax = 100;
  searchObject.priority = '';
  searchObject.approveStatus = '';
  searchObject.executeStatus = '';
  searchObject.terminateStatus = '';
  searchObject.docNumber = '';
  searchObject.supplier = '';
  dateRange.value = [];
  progressRange.value = [0, 100];
  
  // 清空所有标签
  selectedTags.value = [];
  
  search();
}

// 处理更多操作
const handleCommand = (command) => {
  if (command === 'saveSearch') {
    ElMessage.success('已保存当前搜索条件');
  } else if (command === 'loadSearch') {
    ElMessage.success('已加载保存的搜索条件');
  } else if (command === 'clearAll') {
    resetSearch();
    ElMessage.info('已清空所有条件');
  }
}

const {pageData, sizeChange, pageChange, search, changeTableSort, loading} = usePage("/project/search", searchObject);
const {showView, addView, editView} = useView();

// 格式化进度提示
const formatProgressTooltip = (val) => {
  return val + '%';
}

// 导出数据
const exportData = () => {
  ElMessage.success('项目数据导出成功');
}

// 选中的标签
const selectedTags = ref([]);

// 选择项目经理
const selectManager = (manager) => {
  searchObject.manager = manager;
}

// 切换标签选中状态
const toggleTag = (tag) => {
  const index = selectedTags.value.indexOf(tag);
  if (index === -1) {
    selectedTags.value.push(tag);
  } else {
    selectedTags.value.splice(index, 1);
  }
}

// 移除标签
const removeTag = (tag) => {
  const index = selectedTags.value.indexOf(tag);
  if (index !== -1) {
    selectedTags.value.splice(index, 1);
    
    // 重置相应的搜索条件
    if (tag.includes('审批')) {
      searchObject.approveStatus = '';
    } else if (tag.includes('执行')) {
      searchObject.executeStatus = '';
    } else if (tag.includes('终止')) {
      searchObject.terminateStatus = '';
    } else if (tag.includes('日期')) {
      searchObject.startDate = '';
      searchObject.endDate = '';
      dateRange.value = [];
    } else if (tag.includes('单据编号')) {
      searchObject.docNumber = '';
    } else if (tag.includes('供应商')) {
      searchObject.supplier = '';
    }
  }
}

// 切换高级搜索状态
const toggleAdvancedSearch = () => {
  advancedSearch.value = !advancedSearch.value;
}

// 监听搜索字段变化并更新标签
watch(() => searchObject.approveStatus, (newVal) => {
  if (newVal) {
    const options = [
      { value: 'approved', label: '已审批' },
      { value: 'unapproved', label: '未审批' },
      { value: 'approving', label: '审批中' }
    ];
    const option = options.find(opt => opt.value === newVal);
    if (option) {
      updateTag('审批', `审批: ${option.label}`);
    }
  } else {
    removeTagByPrefix('审批');
  }
});

watch(() => searchObject.executeStatus, (newVal) => {
  if (newVal) {
    const options = [
      { value: 'pending', label: '待启动' },
      { value: 'in-progress', label: '进行中' },
      { value: 'completed', label: '已完成' },
      { value: 'paused', label: '已暂停' }
    ];
    const option = options.find(opt => opt.value === newVal);
    if (option) {
      updateTag('执行', `执行: ${option.label}`);
    }
  } else {
    removeTagByPrefix('执行');
  }
});

watch(() => searchObject.terminateStatus, (newVal) => {
  if (newVal) {
    const options = [
      { value: 'terminated', label: '已终止' },
      { value: 'not-terminated', label: '未终止' }
    ];
    const option = options.find(opt => opt.value === newVal);
    if (option) {
      updateTag('终止', `终止: ${option.label}`);
    }
  } else {
    removeTagByPrefix('终止');
  }
});

watch(() => searchObject.docNumber, (newVal) => {
  if (newVal) {
    updateTag('单据编号', `单据编号: ${newVal}`);
  } else {
    removeTagByPrefix('单据编号');
  }
});

watch(() => searchObject.supplier, (newVal) => {
  if (newVal) {
    updateTag('供应商', `供应商: ${newVal}`);
  } else {
    removeTagByPrefix('供应商');
  }
});
</script>

<style scoped>
.project-container {
  padding: 20px;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  font-size: 24px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

/* 现代玻璃态搜索组件 */
.search-container {
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  transition: all 0.3s ease;
}

.search-wrapper {
  padding: 24px;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(234, 236, 240, 0.7);
  padding-bottom: 16px;
}

.search-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}

.search-title .el-icon {
  font-size: 20px;
  color: #6967f1;
}

.search-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  color: #666;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08);
  color: #6967f1;
}

.search-body {
  padding: 0;
}

.search-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.search-field {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.date-field {
  flex: 2;
  max-width: 480px;
}

/* 玻璃态输入框样式 */
.glass-input :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  height: 44px;
  padding: 0 16px;
}

.glass-input :deep(.el-input__wrapper:hover),
.glass-input :deep(.el-input__wrapper.is-focus) {
  border-color: #6967f1;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 16px rgba(105, 103, 241, 0.15) !important;
  transform: translateY(-2px);
}

.glass-input :deep(.el-input__inner) {
  height: 42px;
  font-size: 14px;
  color: #333;
}

.glass-input :deep(.el-input__prefix) {
  padding-right: 12px;
  color: #8a8a9a;
}

.glass-input :deep(.el-input__prefix .el-icon) {
  font-size: 18px;
}

/* 玻璃态选择器样式 */
.glass-select {
  width: 100%;
}

.glass-select :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  height: 44px;
  padding: 0 16px;
}

.glass-select :deep(.el-input__wrapper:hover),
.glass-select :deep(.el-input__wrapper.is-focus) {
  border-color: #6967f1;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 16px rgba(105, 103, 241, 0.15) !important;
  transform: translateY(-2px);
}

.glass-select :deep(.el-input__inner) {
  height: 42px;
  font-size: 14px;
  color: #333;
}

.select-prefix {
  padding-right: 12px;
  color: #5e5e6e;
  font-size: 14px;
  font-weight: 500;
  border-right: 1px solid rgba(220, 223, 230, 0.5);
  height: 24px;
  line-height: 24px;
  display: flex;
  align-items: center;
}

/* 日期选择器样式 */
.date-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #5e5e6e;
  font-size: 14px;
  font-weight: 500;
}

.date-label .el-icon {
  font-size: 16px;
  color: #6967f1;
}

.glass-date-picker {
  width: 100%;
}

.glass-date-picker :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  height: 44px;
}

.glass-date-picker :deep(.el-input__wrapper:hover),
.glass-date-picker :deep(.el-input__wrapper.is-focus) {
  border-color: #6967f1;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 16px rgba(105, 103, 241, 0.15) !important;
  transform: translateY(-2px);
}

.glass-date-picker :deep(.el-range-separator) {
  color: #606266;
}

/* 搜索页脚样式 */
.search-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(234, 236, 240, 0.7);
}

.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tag-label {
  color: #909399;
  font-size: 14px;
}

.search-tag {
  background-color: rgba(105, 103, 241, 0.1);
  border-color: rgba(105, 103, 241, 0.2);
  color: #6967f1;
}

.search-buttons {
  display: flex;
  gap: 12px;
}

.search-btn {
  background: linear-gradient(135deg, #6967f1 0%, #504feb 100%);
  border: none;
  box-shadow: 0 6px 12px rgba(105, 103, 241, 0.25);
  border-radius: 12px;
  height: 44px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(105, 103, 241, 0.3);
  background: linear-gradient(135deg, #5856d6 0%, #4341d7 100%);
}

.search-btn:active {
  transform: translateY(0);
}

.search-btn .el-icon {
  font-size: 16px;
}

.expand-btn {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(220, 223, 230, 0.5);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  color: #606266;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.expand-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: #6967f1;
  color: #6967f1;
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08);
}

.expand-icon {
  font-size: 12px;
  transition: all 0.3s;
}

/* 高级搜索区域 */
.advanced-search {
  margin-top: 20px;
  padding: 20px;
  background: rgba(249, 250, 252, 0.7);
  border-radius: 12px;
  border: 1px solid rgba(234, 236, 240, 0.3);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.progress-slider {
  margin-top: 20px;
  padding: 0 10px;
}

.slider-label {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #5e5e6e;
  font-weight: 500;
}

.glass-slider :deep(.el-slider__runway) {
  height: 10px;
  background-color: rgba(218, 218, 218, 0.3);
  border-radius: 10px;
}

.glass-slider :deep(.el-slider__bar) {
  height: 10px;
  background: linear-gradient(90deg, #6967f1 0%, #504feb 100%);
  border-radius: 10px;
}

.glass-slider :deep(.el-slider__button-wrapper) {
  top: -14px;
}

.glass-slider :deep(.el-slider__button) {
  width: 24px;
  height: 24px;
  background: #ffffff;
  border: 2px solid #6967f1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.glass-slider :deep(.el-slider__button:hover) {
  transform: scale(1.1);
}

.glass-slider :deep(.el-slider__marks-text) {
  margin-top: 14px;
  color: #8a8a9a;
}

/* 自定义下拉选择器样式 */
:deep(.el-select__popper.el-popper) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  border-radius: 12px;
  padding: 8px;
}

:deep(.el-select-dropdown__item) {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #606266;
  border-radius: 8px;
  margin: 2px 0;
  padding: 0 16px;
}

:deep(.el-select-dropdown__item.selected) {
  color: #6967f1;
  font-weight: 500;
  background-color: rgba(105, 103, 241, 0.1);
}

:deep(.el-select-dropdown__item:hover) {
  background-color: rgba(248, 248, 248, 0.9);
}

/* 日期选择器弹窗样式 */
:deep(.el-picker__popper.el-popper) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  border-radius: 12px;
}

:deep(.el-picker-panel) {
  background: transparent;
}

:deep(.el-date-picker__header-label.active),
:deep(.el-date-picker__header-label:hover),
:deep(.el-picker-panel__icon-btn:hover),
:deep(.el-date-table td.today div) {
  color: #6967f1;
}

:deep(.el-date-table td.in-range div) {
  background-color: rgba(105, 103, 241, 0.1);
}

:deep(.el-date-table td.start-date div, .el-date-table td.end-date div) {
  background-color: #6967f1;
}

.project-list {
  margin-top: 20px;
}

.project-gantt, 
.project-calendar, 
.project-kanban {
  margin-top: 20px;
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(249, 250, 252, 0.8);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

/* 抽屉相关样式 */
.drawer-content {
  padding: 0 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drawer-footer {
  margin-top: auto;
  padding: 10px 0 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
